<!--通讯录-->
<template>
  <div class="app-container">
    <NavBar title="通讯录" :left="false" />
    <div class="has-nav-bar">
      <van-search v-model="listQuery.keyword" placeholder="请输入用户名、姓名、手机、部门职位" @search="onSearch" />
      <van-empty v-if="list.length===0" description="暂无联系人信息" />
      <div style="flex:1;overflow: auto;">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell-group>
              <van-cell v-for="item in list" :key="item.id" is-link :to="'/addressBook/details/'+item.id" class="mail-list-item">
                <template #title>
                  {{ item.realName }}/{{ item.userName }}
                </template>
                <template #label>
                  {{ item.organizationName }}
                </template>
                <template #icon>
                  <img class="user-avatar" :src="constants.getFileView(item.avatar)" data-default="avatar" @error="handleImageError">
                </template>
                <template #right-icon />
              </van-cell>
            </van-cell-group>
          </van-list>
        </van-pull-refresh>
      </div>

    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      list: [],
      listQuery: {
        page: 1,
        limit: 14,
        keyword: '',
        sort: '+gmtModified'
      },
      loading: false,
      finished: false,
      refreshing: false
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    onSearch() {
      this.onRefresh()
    },
    async  onLoad() {
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }

      var res = await this.$store.dispatch('userPageV2', this.listQuery)
      if (res.total === 0) {
        this.list = []
        this.refreshing = false
        this.finished = true
        return
      }
      this.list.push(...res.records)
      this.loading = false

      if (res.pages === this.listQuery.page) {
        this.finished = true
      } else {
        this.listQuery = {
          ...this.listQuery,
          page: this.listQuery.page + 1
        }
      }
    },
    onRefresh() {
      this.listQuery = {
        ...this.listQuery,
        page: 1
      }
      this.list = []
      this.finished = false
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

  <style lang="scss" scoped >
  .mail-list-item {
    height: 60px;
    margin-bottom: 1rem;
    .van-cell__title{
      margin-left: 1rem;
      font-size: 0.875rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  </style>

